<template>
	<view class="fixedbody">
		<view class="topInfo">
			<image :src="matchData.bgImgUrl" mode="aspectFill"></image>
			<view class="poMaskBox">
				<image class="logo" :src="matchData.logoUrl"></image>
				<view class="poMask">
					<view class="name">{{matchData.name}}</view>
					
				</view>
			</view>
			<view class="flexBox">
				<view class="p"><i class="iconfont icon-shijian"></i>比赛日期：{{matchData.beginTime?.substring(0, 10)}}至{{matchData.endTime?.substring(0, 10)}}</view>
			    <view class="p"><i class="iconfont icon--didian"></i>主办单位：{{matchData.ocOrganizer}}</view>
				<view class="p" v-if="matchData.cpts?.length"><i class="iconfont icon-flag"></i>分站赛场次：<span class="green">{{ matchData.cpts.length}}</span>场</view>
			    <view class="p"  v-if="matchData.ocTelno" @click="makeCall(matchData.ocTelno)"><i class="iconfont icon-shumashouji"></i>联系电话：{{ matchData.ocTelno}}</view>
			    <view class="p flex"><i class="iconfont icon-jinggao"></i>相关条例：
			    
			    <view class="underLine mr10" @click="goWebView(matchData.signKnowUrlObj?.url)"
			    	v-if="matchData.signKnowUrlObj?.url">
			    	报名须知
			    </view>
			    <view class="underLine mr10" @click="goWebView(matchData.ruleUrlObj?.url)"
			    	v-if="matchData.ruleUrlObj?.url">
			    	竞赛规程
			    </view>
			    <view class="underLine" @click="goWebView(matchData.disclaimerUrlObj?.url)"
			    	v-if="matchData.disclaimerUrlObj?.url">
			    	免责声明
			    </view>   
			    </view>
			</view>
			<view class="typeBox">
			   <text class="typeTag typeTag1" >{{matchData.level}}</text>		
			  <text class="typeTag ml20" v-if="matchData.type==1">联赛</text>	
			</view>
			
			<view class="statusBox">
				<!-- 1 报名未开始 2 报名进行中 3 即将开始 4 进行中 5已经结束 -->
				<text class="status status01" v-if="matchData.progressStatusCode==3">即将开始</text>
				<text class="status status02" v-if="matchData.progressStatusCode==2">报名中</text>
				<text class="status status03" v-if="matchData.progressStatusCode==4">进行中</text>
				<text class="status status04" v-if="matchData.progressStatusCode==5">已结束</text>
				<text class="status status04" v-if="matchData.progressStatusCode==1">报名未开始</text>

				<!-- <text class="time">报名截止：{{matchData.signEndTime}}</text> -->
			</view>
			<!-- <view class="statusBox" v-if="matchData.ocTelno" @click="makeCall(matchData.ocTelno)">
				<text class="time">联系电话： {{matchData.ocTelno}}</text>
			</view> -->
		</view>

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<uni-card title="报名须知" v-if="matchData.signKnow">
					<view>
						<view v-html="matchData.signKnow"></view>
					</view>
				<!-- 	<view class="underLine" @click="goWebView(matchData.signKnowUrlObj?.url)"
						v-if="matchData.signKnowUrlObj?.url">
						<uni-icons type="download" size="16" color="#54E1B9"></uni-icons>
						{{matchData.signKnowUrlObj?.name}}
					</view>
					<view class="underLine" @click="goWebView(matchData.ruleUrlObj?.url)"
						v-if="matchData.ruleUrlObj?.url">
						<uni-icons type="download" size="16" color="#54E1B9"></uni-icons>
						{{matchData.ruleUrlObj?.name}}
					</view>
					<view class="underLine" @click="goWebView(matchData.disclaimerUrlObj?.url)"
						v-if="matchData.disclaimerUrlObj?.url">
						<uni-icons type="download" size="16" color="#54E1B9"></uni-icons>
						{{matchData.disclaimerUrlObj?.name}}
					</view> -->
				</uni-card>
				<uni-card title="组委会">
					<view v-if="matchData.ocOrganizer" class="flexss">
						<text>主办单位： </text>
						<view>
							<view v-for="(s,index) in matchData.ocOrganizer?.replace(/，/g,',').split(',')" :key="index">{{s}}</view>
						</view>
					</view>
					<view v-if="matchData.ocDeptName" class="flexss"><text>承办单位： </text>

						<view>
							<view v-for="(s,index) in matchData.ocDeptName?.replace(/，/g,',').split(',')" :key="index">{{s}}</view>
						</view>

					</view>
					<view v-if="matchData.ocSupportor" class="flexss"><text>支持单位： </text>
						<view>
							<view v-for="(s,index) in matchData.ocSupportor?.replace(/，/g,',').split(',')" :key="index">{{s}}</view>
						</view>

					</view>
					<view v-if="matchData.ocToDeptName" class="flexss"><text>协办单位： </text>
						<view>
							<view v-for="(s,index) in matchData.ocToDeptName?.replace(/，/g,',').split(',')" :key="index">{{s}}</view>
						</view>

					</view>
					<view v-if="matchData.operatingUnit" class="flexss"><text>运营单位： </text>
						<view>
							<view v-for="(s,index) in matchData.operatingUnit?.replace(/，/g,',').split(',')" :key="index">{{s}}</view>
						</view>
					
					</view>
					<view v-if="matchData.ocTelno"><text>组委会电话： </text>{{matchData.ocTelno}}</view>

				</uni-card>

				
				<view class="matchItem" @click="goSign(item)" v-show="index<3" v-for="(item,index) in matchData.cpts" :key="index">
					<view class="leftImg">
						<image mode="aspectFit" :src="item.bgImgUrl"></image>
					</view>
					<view class="rightWen">
						<view class="name">{{item.name}}</view>
						<view class="flexBetween">
							<view class="time" v-if="item.type==0">报名截止：{{item.signEndTime.substring(0, 10)}}</view>
							<text class="status s01" v-if="item.progressStatusCode==3">即将开始</text>
							<text class="status s02" v-if="item.progressStatusCode==2">报名中</text>
							<text class="status s03" v-if="item.progressStatusCode==4">进行中</text>
							<text class="status s04" v-if="item.progressStatusCode==5">已结束</text>
							<text class="status s04" v-if="item.progressStatusCode==1">报名未开始</text>
							
						</view>
						
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="matchItem" @click="goSign(item)" v-for="(item,index) in matchData.cpts" :key="index">
					<view class="leftImg">
						<image mode="aspectFit" :src="item.coverUrl"></image>
					</view>
					<view class="rightWen">
						<view class="name">{{item.name}}</view>
						<view class="flexBetween">
							<view class="time" v-if="item.type==0">报名截止：{{item.signEndTime.substring(0, 10)}}</view>
						<text class="status s01" v-if="item.progressStatusCode==3">即将开始</text>
						<text class="status s02" v-if="item.progressStatusCode==2">报名中</text>
						<text class="status s03" v-if="item.progressStatusCode==4">进行中</text>
						<text class="status s04" v-if="item.progressStatusCode==5">已结束</text>
						<text class="status s04" v-if="item.progressStatusCode==1">报名未开始</text>
						
					    </view>
					</view>
				</view>
				<view class="nodata" v-if="matchData.cpts?.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
					<text>没有下属的独立赛</text>
				</view>
			</view>
			<view v-if="current === 2">
				<view class="schedule" v-for="s in matchData.cptScheduleList" :key="s.id">
					<view class="time">
						<uni-icons type="calendar" size="18" color="#d43e3e"></uni-icons>
						{{s.timeRange.split(',')[0].substring(0, 16)}}
						 ~ 
						{{s.timeRange.split(',')[1].substring(0, 16)}}
					</view>
					<view>{{s.name}}</view>
					<view class="title" style="width: 670rpx;overflow: auto;" v-html="s.introduction"></view>
					<view class="place">
						<uni-icons type="location" size="15"></uni-icons>
						{{s.address}}
					</view>
				</view>
				<view class="nodata" v-if="matchData.cptScheduleList.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
					<text>还没有日程</text>
				</view>
			</view>
			<view v-if="current === 3&&cptLabelsList.length>0" class="cardBox">
				<uni-card>
					<view class="richContent" v-html="cptLabelsList[0]?.customText"></view>
					<view class="underLine" @click="goWebView(cptLabelsList[0].fileObj.url)"
						v-if="cptLabelsList[0].fileUrl">
						<uni-icons type="download" size="16" color="#d43e3e"></uni-icons>
						{{cptLabelsList[0]?.fileObj?.name}}
					</view>
				</uni-card>
			</view>
			<view v-if="current === 4&&cptLabelsList.length>1" class="cardBox">
				<uni-card>
					<view class="richContent" v-html="cptLabelsList[1]?.customText"></view>
					<view class="underLine" @click="goWebView(cptLabelsList[1].fileObj.url)"
							v-if="cptLabelsList[1]?.fileUrl">
							<uni-icons type="download" size="16" color="#d43e3e"></uni-icons>
							{{cptLabelsList[1]?.fileObj?.name}}
					</view>
					
				</uni-card>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import * as match from '@/common/match.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	const app = getApp();
	const data = reactive({
		items: ['首页', ' 分站赛', '日程'],
		current: 1,
		activeColor: '#d43e3e',
		projectList: [],
		groupList: [],
		levelList: [],
		levelListGirl: [],
		levelListBoy: [],
		popup: null,
		popupGroupList: null,
		groupListArr: [],	
		matchId: 0,
		matchData: {},
		groups: [],
		groupId: '',
		cptLabelsList: []
	})
	const {
		items,
		current,
		activeColor,
		projectList,
		groupList,
		levelList,
		popup,
		popupGroupList,
		groupListArr,
		matchId,
		groups,
		matchData,
		groupId,
		levelListGirl,
		levelListBoy,
		cptLabelsList
	} = toRefs(data);
	// 分享
	onLoad(option => {
		if (option.id) {
			matchId.value = option.id
		}
		if(option.scene){
			matchId.value = decodeURIComponent(option.scene);
		}
	})
	onShow(option => {
		if (app.globalData.isLogin) {
			getMatch(matchId.value)
		} else {
			app.firstLoadCallback = () => {
				getMatch(matchId.value)
			};
		}
	})

	function getMyGroupList() {
		match.getMyGroupList().then(res => {
			groups.value = res.data
		})
	}
	function makeCall(num) {
		uni.makePhoneCall({
			phoneNumber: num
		});
	}
	function getMatch(id) {
		match.getMatchById({
			id: id
		}).then(res => {
			matchData.value = res.data
			app.globalData.coachOrLeaderFlag = res.data.coachOrLeaderFlag
			app.globalData.noPhotoCanSign = res.data.noPhotoCanSign
			if (matchData.value.signType == 1 || matchData.value.signType == 2) {
				getMyGroupList()
			}
			if(matchData.value.signKnowUrl&&matchData.value.signKnowUrl!='null'){
				matchData.value.signKnowUrlObj = JSON.parse(matchData.value.signKnowUrl)[0]
			}
			if(matchData.value.ruleUrl&&matchData.value.ruleUrl!='null'){
				matchData.value.ruleUrlObj = JSON.parse(matchData.value.ruleUrl)[0]
			}
			if(matchData.value.disclaimerUrl&&matchData.value.disclaimerUrl!='null'){
				matchData.value.disclaimerUrlObj = JSON.parse(matchData.value.disclaimerUrl)[0]
			}
			if (res.data.cptLabels && cptLabelsList.value.length == 0) {
				cptLabelsList.value = res.data.cptLabels
				for (let c of cptLabelsList.value) {
					items.value.push(c.customTitle)
					c.customText = c.customText.replace(/\<img/gi, '<img style="width:100%";height:auto')
					if (c.fileUrl) {
						c.fileObj = JSON.parse(c.fileUrl)[0]
					}
				}
			}
		// 	if(matchData.value.cptScheduleList){
		// 		for(let c of matchData.value.cptScheduleList){
		// 			c.introduction = c.introduction.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
		// 			.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
		// 			.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
		// 			.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
		// 			.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
		// 		}
		// 	}
		})
	}

	function onClickItem(e) {
		current.value = e.currentIndex
	}

	function goSign(item) {
		let path = `/pages_match/match/single?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	}
	function goWebView(url) {
		uni.showLoading({
			title: '下载中'
		});
		uni.downloadFile({
			url: url,
			success: function(res) {
				uni.hideLoading();
				var filePath = res.tempFilePath;
				uni.showLoading({
					title: '正在打开'
				});
				uni.openDocument({
					filePath: filePath,
					showMenu: true,
					success: function(res) {
						uni.hideLoading();
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			fail: function(error) {
				uni.hideLoading();
				uni.showToast({
					title: `下载失败`,
					icon: 'none',
					duration: 2000
				});
			}
		});
	
	}
</script>

<style scoped lang="scss">
	.topInfo {
		background: #fff;
		position: relative;
		padding: 25rpx;
	}

	.topInfo>image {
		width: 700rpx;
		height: 394rpx;
		background: #fff;
		border-radius: 15rpx;
		display: block;
		margin: auto;    //filter: brightness(0.6);
	}
    .topInfo .typeBox{
		width:700rpx;
		height:46rpx;
		position: absolute;
		top: 373rpx;
		left: 25rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		background:rgba(0,0,0,0.5);
		display: flex;
		justify-content: flex-end;
		.typeTag {
			color: #FFFFFF;
			background: #FF8124;
			font-size: 24rpx;
			color: #FFFFFF;
			border-radius: 15rpx 0rpx 15rpx 0rpx;
			padding: 6rpx 14rpx;
		}
		.typeTag1{
			background:$uni-color-primary;
		}
	}
	

	.name {
		font-size: 32rpx;
		color: #000000;
		margin: 36rpx 0 18rpx;
		text-align: left!important;
	}

	.statusBox {
		.status {
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 20rpx;
			color: #FFFFFF;
			padding: 4rpx 15rpx;
			margin: 0 15rpx 0 0;
		}

		.status01 {
			background: linear-gradient(270deg, rgba(254, 164, 73, 1), rgba(255, 185, 95, 1));
		}

		.status02 {
			background: linear-gradient(270deg, #e19393, #d45050);
		}

		.status03 {
			background: linear-gradient(270deg, rgba(190, 142, 251, 1), rgba(167, 109, 244, 1));
		}

		.status04 {
			background: linear-gradient(270deg, #D9D9D9, #BCBCBC);
		}

		.time {
			color: #7B7F83;
			font-size: 26rpx;
		}
	}
	.team {
		width: 700rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		height: 130rpx;
		margin: 20px auto 0;
		display: flex;
		align-items: center;
	}

	.team image {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx 30rpx;
		border-radius: 50%;
	}

	.team .name {
		color: #000000;
		font-size: 30rpx;
		margin: 0;
	}

	.schedule {
		width: 700rpx;
		background: #fff;
		padding: 25rpx;
		border-radius: 15rpx;
		margin: 30rpx 20rpx 0;
		box-sizing: border-box;
	}

	.schedule .time {
		font-size: 28rpx;
		color: $uni-color-primary;margin: 0 0 10rpx;
	}

	.schedule .time image {
		width: 28rpx;
		height: 28rpx;
	}
	 .matchItem .rightWen{
		  flex:1;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
		
	 }
    .matchItem .rightWen .name{
		margin:0;
		font-weight: bold;
	}

	.schedule .title {
		color: #2B3133;
		font-size: 30rpx;
	}
	.schedule img{max-width: 100%;}
	.schedule .place {
		font-size: 28rpx;
		color: #7B7F83;
	}

	.pd20 {
		padding: 20px;
	}

	.chooseGroup {
		padding: 40rpx;

		.t {
			text-align: center;
			margin: 0 0 30rpx;
			font-size: 34rpx;
			color: #999;
		}

		.list {
			view {
				margin: 20rpx 0 0;
				color: $uni-color-primary;
				text-align: center;
				border: 1px solid $uni-color-primary;
				border-radius: 41rpx;
				padding: 16rpx 30rpx;
			}
		}
	}

	:deep(.uni-list-item__container) {
		padding-left: 0 !important;
	}

	:deep(.uni-icon-wrapper) {
		padding-left: 0 !important;
	}

	:deep(.uni-collapse-item) {
		margin: 0 !important;
		border-bottom: 1px solid #e1e1e1;
		border-radius: 0;
	}

	.levelTitle {
		text {
			float: right;
			font-size: 28rpx;
			color: #999;
		}

	}

	.levelItem {
		background: #eee;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx 0 0;
		display: inline-block;
		border-radius: 6rpx;
	}

	.vh50 {
		height: 50vh;
		overflow: auto;
	}

	.mt-30 {
		margin-top: 30rpx;
	}

	:deep(.uni-section .uni-section-header) {
		padding: 12px 0 0 !important;
	}

	.richContent {
		line-height: 1.6;overflow: auto;

		img {
			max-width: 100%;
		}
	}

	.fixedBottom button {
		margin: auto;
	}
	.matchItem{background: #fff;display: flex;}
	.poMaskBox{
		width: 100%; 
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		// position: absolute;top: 0;left: 0;
		.logo{width: 50px;height: 50px;border-radius:50%;background-color: #FFF;}
		.poMask{
			 text-align:left;
			 .name{font-size: 32rpx;font-weight: bold;margin:0}
			 
			 .p{font-size: 24rpx;}
	     }
		
	}
	.flexss {
		display: flex;
	}
	.uni-padding-wrap{padding: 0;
	 background:linear-gradient(90deg, #db9a9a, $uni-color-primary);
	
	}
	:deep(.segmented-control){
		justify-content: space-around;
	}
	:deep(.segmented-control__item){
		 
		flex:none!important;
		justify-content: space-between;
		 .segmented-control__text{
			  color:#fff!important;
		 }
		 .segmented-control__item--text{
		 			  border:none;
		 			  color:$uni-color-primary!important;
					  background:#fff;
					  font-weight: bold;
					  border-radius:10px;
					  padding:5rpx 10rpx;
		 }
	 }
	.underLine {
		text-decoration: underline;color: $uni-color-primary;
	}
	.flexBox{
		padding:0 20rpx;
		.p{
			color:#747474;
			display:flex;
			justify-content: flex-start;
			align-items: center;
			line-height:50rpx;
			.iconfont{
				margin-right:15rpx;
			}
		}
	}
	:deep(.uni-card){
		.uni-card__header{
			position:relative;
			border:none;
			&::before {
			        position: absolute; /*绝对定位*/
			        top: 50%; /*Y轴方向偏移自身高度的50%*/
			        transform: translatey(-40%); /*Y轴方向偏移微调*/
			        left:0; /*紧靠容器左边缘*/
			        content: ''; /*伪元素需要有内容才能显示*/
			        width: 3px; /*伪元素宽度*/
			        height: 17px; /*伪元素高度*/
			        background-color: $uni-color-primary; /*伪元素颜色*/
			
			     }
		}
		.uni-card__content{
			border:1px solid  $uni-color-primary;
			margin-bottom:20rpx;
		}
			 
	}
	.matchItem .rightWen .time{
		margin:0!important;
	}
	.cardBox{
		:deep(.uni-card){
			padding-top:20rpx!important;
		}
	}
</style>